<template>
  <FullPageModal
    v-model:visible="innerVisible"
    :custom-footer="true"
    :title="t('aiot.serviceApply.addWorkOrder')"
    @open="open"
  >
    <div class="w-px-1 mx-auto">
      <a-tabs v-model:activeKey="activeKey">
        <a-tab-pane v-for="item of createWorkOrderArr" :key="item.key" disabled :style="item.style">
          <template #tab>
            <Icon :type="item.icon" class="text-xl" />
            <span> {{ item.tabName }} </span>
          </template>
        </a-tab-pane>
      </a-tabs>
      <DynamicForm ref="serviceOrderIns" :model="model" :model-form-setting="modelFormSetting" :force-flex-row="true" />
    </div>
    <template #footer>
      <a-button @click="handleCancelFn">{{ t("common.cancel") }}</a-button>
      <a-button type="primary" @click="ok">{{ t("common.ok") }}</a-button>
      <!-- <a-button type="primary" @click="dispatchWorkOrderFn">{{ t("aiot.serviceApply.dispatchWorkOrder") }}</a-button> -->
    </template>
    <ChooseProjectModal v-model:show="chooseProjectVisible" @ok="handleChooseProject" />
    <ChooseEquipmentModal
      v-model:show="chooseEquipmentVisible"
      :project-id="model?.projectId"
      @ok="handleChooseEquipement"
    />
    <LocationDialog v-model:visible="locDgVisible" @ok="chooseLoc" />
    <DispatchModal :options="dispatchOptions" @ok="emits('ok')" />
  </FullPageModal>
</template>
<script lang="ts" setup>
import { useI18n } from "/@/locales/useI18n";
import LocationDialog from "/@/components/LocationDialog.vue";
import Panel from "/@/components/Panel.vue";
import PermissionBtn from "/@/components/PermissionBtn.vue";
import { nextTick, ref, watch } from "vue";
import { OperPermissionType } from "/@/api/aiot/role/models";
import FullPageModal from "/@/components/FullPageModal.vue";
import Icon from "/@/components/Icon.vue";
import { useServiceOrderModal } from "./useServiceOrderModal";
import ChooseCustomerModal from "/@/components/ChooseCustomerModal.vue";
import ChooseProjectModal from "/@/components/ChooseProjectModal.vue";
import ChooseEquipmentModal from "/@/components/ChooseEquipmentModal.vue";
import { DispatchOptions, ServiceOrderItem } from "/@/api/aiot/serviceApply/models";
import { getServiceOrderById, transferWorkOrders } from "/@/api/aiot/serviceApply";
const { t } = useI18n();
const props = defineProps<{
  visible: boolean;
  serviceOrderId: string;
}>();
const activeKey = ref<string>("REPAIR");
const {
  serviceOrderIns,
  model,
  modelFormSetting,
  createWorkOrderArr,
  handleChooseProject,
  chooseProjectVisible,
  chooseEquipmentVisible,
  handleChooseEquipement,
  locDgVisible,
  chooseLoc,
} = useServiceOrderModal();
const emits = defineEmits(["create", "update:visible", "ok"]);
const innerVisible = ref(false);
const dispatchOptions = ref<DispatchOptions>({ workOrderId: "", projectId: "" });
const workOrderId = ref("");
const serviceOrderDetails = ref<ServiceOrderItem>({});
watch(
  () => props.visible,
  async (v) => {
    if (v) {
      serviceOrderDetails.value = (await getServiceOrderById({ serviceOrderId: props.serviceOrderId })) || {};
      // model.value = req ? req : model.value;
      let keyArr = Object.keys(model.value);
      keyArr.map((key) => {
        model.value[key] = serviceOrderDetails.value[key];
      });
      activeKey.value = serviceOrderDetails.value.serviceType || "";
      model.value.workOrderType = serviceOrderDetails.value.serviceType || "";
      model.value.serviceId = serviceOrderDetails.value.serviceOrderId || "";
      // 创建工单（转工单）与查询详情字段不一致
      model.value.equipmentNum = serviceOrderDetails.value.equipmentNum || 0;
      model.value.faultType = serviceOrderDetails.value.faultType || "";
    } else {
      model.value.faultImages = [];
      serviceOrderIns.value?.resetFields();
    }
    innerVisible.value = v;
  }
);
function open() {
  nextTick(() => {
    serviceOrderIns.value?.initFormItemComponentData();
  });
}
watch(activeKey, (v) => {
  model.value.serviceType = v;
});
function handleCancelFn() {
  emits("update:visible", false);
}
//第一次打开
let firstShow = true;
watch(innerVisible, (v) => {
  emits("update:visible", v);
  if (firstShow) {
    firstShow = false;
  }
});
function dispatchWorkOrderFn() {
  serviceOrderIns.value?.validate().then(async () => {
    let data: ServiceOrderItem = {};
    Object.assign(data, model.value);
    let req = await transferWorkOrders(data);
    if (req?.workOrderId) {
      workOrderId.value = req?.workOrderId || "";
      dispatchOptions.value = {
        workOrderId: req?.workOrderId || "",
        projectId: model.value.projectId || "",
      };
    }
  });
}
function ok() {
  serviceOrderIns.value?.validate().then(async () => {
    let data: ServiceOrderItem = {};
    Object.assign(data, model.value);
    let req = await transferWorkOrders(data);
    if (req?.workOrderId) {
      emits("ok");
    }
  });
}
</script>
